<template>
	<view>
		<uni-card title="选择预约时间" style="padding: 0px;">
			<view class="data">
				<!-- 2、利用v-for循环遍历数据,数据使用对象的方式存储 -->
				<!-- 3、使用三目运算,判断他的day是否等于dataShow,如果等于则高亮 -->
				<ul>
					<li style="" v-for="(item,index) in dataTime" :key="index"
						:class="item.number==dataShow.number?'dataActive':'ral'" @click="show(item)">
						<text style="font-size: 14px;color:black;">{{item.day}}</text>
						<text>{{item.number}}</text>
					</li>
				</ul>
			</view>
		</uni-card>
		<uni-card title="套餐详情" style="padding: 0px;">
			<p style="text-align: center;font-size: 16px;">常规检查x1</p>
			<p style="text-align: center;font-size: 16px;">血常规检查x1</p>
		</uni-card>
		<uni-card title="预约须知：" style="padding: 0px;">
			<p>1.套餐内的项目为固定项目，不可增减。</p>

			<p>2.您可以选择一周内的号源，每周三早10点开放下一周号源。</p>

			<p>3、体检当日至我院至门诊楼三楼领取排队号。</p>

			<p>4、预约成功后如须退款，请于我院退费窗口办理。</p>
		</uni-card>
		<uni-card title="套餐合计:" style="padding: 0px;">
			<p style="font-size: 20px;color: #f46463;float: left;height: 50px;margin-top: 15px;margin-left: 5px;">￥{{taocan.price}}</p>
			<view style="width: 170px;height: 50px;background-color: #006EFF;float: right;">
				<p style="color: #FFFFFF;text-align: center;font-size: 18px;margin-top: 15px;" @click="Toxianqing">下一步</p>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataShow: '',
				dataTime: [

				],
				taocan:{},
				
			}
		},
		onLoad() {
			this.taocan = uni.getStorageSync('taocan')
			//后端获取当前一周的日期 与 周几
			this.getDates();

			//this.nucleicAcidAppoientmentEcho()

		},
		methods: {
			show(item) {
				this.dataShow = item
				console.log(item)
				//this.getDoctors()
			},
			Toxianqing(){
				setTimeout(() => {
					uni.navigateTo({
						url: '../zqw/tijiandetails'
					})
				})
			},
			getDates() {
				console.log("进入")
				this.$axios.get("/user/user/the-patient/getDates").then((
						res) => {
						//response 接口返回数据
						console.log("成功")
						console.log(res.data.data.list)
						console.log(res.data.data.today)
						this.dataTime = res.data.data.list
						this.dataShow = res.data.data.today
						console.log(this.dataShow)

						//根据当前星期 查询当天医生
						//this.getDoctors();
					}) //请求成功
					.catch((error) => {
						console.log(error);
					}); //请求
			},
		}
	}
</script>

<style lang="scss" scoped>
	.data {
		width: 100%;
		height: 190upx;
		//box-shadow: 2upx 2upx 3upx #5b5b5b;

		// 100 140
		ul {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				width: 100upx;
				height: 140upx;
				text-align: center;
				// 设置弹性盒子,并且竖向排列
				display: flex;
				flex-direction: column;
				text-align: center;

				text {
					color: #aaa;
				}

			}

			.ral {
				width: 90upx;
				height: 80upx;
				background: #e2e9f9;
				text-align: center;
				line-height: 80upx;
				border-radius: 40upx;
				color: #000
			}

			.dataActive {
				width: 80upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				background: #006eff;
				color: #fff;
				border-radius: 40upx;
			}
		}
	}

	.div1 {
		width: 600rpx;
		background-color: #f3f8ff;
		border: f4f4f5 solid 1rpx;
		border-radius: 15px;
		margin-left: 10px;
		margin-top: 10px;
		padding: 50rpx;
	}

	.div9 {

		width: 660rpx;
		height: 130rpx;
		border: f4f4f5 solid 1rpx;
		border-radius: 15px;
		margin-left: 10px;
		margin-top: 10px;
		padding: 20rpx;
		text-align: center;
	}

	.div2 {
		color: #b1b2b4;
		float: left;
	}

	.div3 {

		margin: 8.2rpx;
		float: left;
	}

	.div4 {
		font-size: 20rpx;
	}

	.div5 {
		font-size: 23rpx;
		padding: 4rpx 18rpx;
		background-color: #9ACAFC;
		margin: 10rpx;

		border-radius: 20rpx;
	}


	.div7 {
		display: block;
	}

	.div8 {
		background-color: #9ACAFC;
		color: #007AFF;
		width: 100px;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 20rpx;
		text-align: center;
		display: inline-block;
		margin: 20rpx;
	}


	.toBlue {
		background-color: #007AFF;
	}

	.toGray {
		background-color: #C8C9CC;
	}

	.tag1 {
		display: inline-block;
		color: #3289ff;
		margin-left: 10px;

		/* background-color: #3289ff; */
	}
</style>
